<template>
    <!-- 前台系统通知详情对话框 -->
    <el-dialog
            title="详细内容"
            :visible.sync="centerDialogVisible"
            width="60%"
            style="height: 600;"
            >
            <div style="width: 100%;height: 400px; overflow: auto;">
                <div class="info-one">
                        <span class="title">title:</span><span class="title-context">{{ notice.title }}</span>
                        <span class="time">time:</span><span class="time-context">{{ notice.time }}</span>
                    </div>
                    <div class="info-two">
                        <span class="context">context:</span>
                        <div class="context-txt">{{ notice.context }}</div>
                    </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
</template>

<script>
    export default {
        name:'UserSystemItem',
        data() {
            return {
                // 控制对话框的展示
                centerDialogVisible:false,
                // notice数据
                notice:{}
            }
        },
        methods:{
            // 触发对话框的事件回调
            userSystemItemDialogBox(obj){
                this.notice = obj.notice;
                this.centerDialogVisible = obj.flag;
            }
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('userSystemItem',this.userSystemItemDialogBox);
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('userSystemItem');
        }
    }
</script>

<style lang="less" scoped>
.info-one{
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title,.time{
        font-size: 30px;
        font-weight: 600;
        color: #409EFF;
        font-family: 'STKaiti'
    }
    .title-context,.time-context{
        font-size: 30px;
        font-family: 'STXinwei'
    }
}
.info-two{
    .context{
        font-size: 30px;
        font-style: italic;
    }
    .context-txt{
        font-size: 20px;
        margin-top: 20px;
    }
}
</style>